<template>
  <div id='tmpl'>
      <div id="desc">
          <div id="title">
             <h4>{{list.title}}</h4>
                <span>{{list.add_time | datafmt("YYYY-MM-DD HH:mm:ss")}}</span><span>{{list.click}}次浏览</span><span>分类：经济民生</span>
                <p class="p"></p>
          </div>
          <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <!--<li v-for="(item,index) in imglist" :key="index" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                       
                </li>-->
                 <vue-images v-if="isif" :imgs="imglist"
                                :modalclose="modalclose"
                                :keyinput="keyinput"
                                :mousescroll="mousescroll"
                                :showclosebutton="showclosebutton"
                                :showcaption="showcaption"
                                :imagecountseparator="imagecountseparator"
                                :showimagecount="showimagecount"
                                :showthumbnails="showthumbnails">
                </vue-images>
            </ul> 
        </div>
         <p>{{list.content}}</p>
      </div>
   
    
   
  </div>
</template>
<script>
import vueImages from 'vue-images';
export default {
  data () {
    return {
        id:"",
        list:{},
        imglist:[],
        modalclose: true,
        keyinput: true,
        mousescroll: true,
        showclosebutton: true,
        showcaption: true,
        imagecountseparator: '',
        showimagecount: true,
        showthumbnails: true,
        isif:false
    };
  },
  created(){
    this.id = this.$route.params.id;
    this.gettitle();
    this.getimgs();
  },
  methods:{
    gettitle(){
        var url = this.$commons.apidomain + "/api/getimageInfo/"+this.id;
        this.$http.get(url).then(function(res){
            var data = res.body;
            if(data.status != 0){
                this.$commons.Toast(data.message);
                return
            }
            this.list = data.message[0];
        })
    },
    getimgs(){
        var url = this.$commons.apidomain + "/api/getthumimages/" + this.id;
        this.$http.get(url).then(function(res){
             var data = res.body;
            if(data.status != 0){
                this.$commons.Toast(data.message);
                return
            }
             data.message.forEach(function(v){
                // var img = new Image();
                // img.src = v.src;
                v.imageUrl = v.src;
                // v.caption = ""
            })
             this.imglist = data.message;
             this.isif = true;
        })
    }
  },
  components:{
      vueImages
  }
}
</script>
<style lang="css" scoped>
#title h4{
    color:#0094ff;
    font-weight: 600;
    padding:10px 0;
}
#title span{
    color:#ccc;
    font-size: 14px;
    margin-right: 10px;
}
.p{
    height: 1px;
    border-bottom: 1px solid #eee;
    margin:20px 0;
}
.gallery .wrapper[data-v-6173992d]{
    text-align: center
}
.gallery .wrapper img[data-v-6173992d]{
    display: inline-block;
}
.mui-grid-view,.mui-grid-view.mui-grid-9 .mui-table-view-cell{
      background-color: #fff;
      border:0px;
    }
</style>